<template>
    <el-container>
        <el-main>
            <h3>产品详情</h3>
            <hr/>
            <el-container>
                <el-aside width="400px"><el-image :src="src" style="height: 400px"></el-image></el-aside>
                <el-main style="padding: 0 0 0 70px">
                    <el-row>
                        物品名称：华为
                    </el-row>
                    <el-row style="margin-top: 35px">
                        <el-col :span="12"><div class="grid-content bg-purple">
                            型号：荣耀
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple-light">
                            分类：手机
                        </div></el-col>
                    </el-row>
                    <el-row style="margin-top: 35px">
                        <el-col :span="12"><div class="grid-content bg-purple">
                            售价：3999
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple-light">
                            单位：台
                        </div></el-col>
                    </el-row>
                    <el-row style="margin-top: 35px">
                        <el-col :span="12"><div class="grid-content bg-purple">
                            运行 内存：6GB+128GB
                        </div></el-col>
                        <el-col :span="12"><div class="grid-content bg-purple-light">
                            库存：10
                        </div></el-col>
                    </el-row>
                </el-main>
            </el-container>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="产品介绍" name="first" style=" text-align: center">
                    <el-col :span="12" class="qqww"><div class="grid-content bg-purple">
                        手机品牌：
                    </div></el-col>
                    <el-col :span="12" style=""><div class="grid-content bg-purple-light">
                        华为
                    </div></el-col>
                    <el-col :span="12" class="qqww"><div class="grid-content bg-purple">
                        手机型号：
                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple-light">
                        华为V30
                    </div></el-col>
                    <el-col :span="12" class="qqww"><div class="grid-content bg-purple">
                        手机处理器：
                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple-light">
                        麒麟990
                    </div></el-col>


                </el-tab-pane>
                <el-tab-pane label="产品附件" name="second">配置管理</el-tab-pane>
            </el-tabs>

        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "QSpxx",
        data() {
            return {
                src: 'src/assets/华为V30.PNG',
                activeName: 'second'
            }
        },
        methods: {
            handleClick(tab, event) {
             window.console.log(tab, event);
            }
        }
    }
</script>

<style scoped>
    .el-aside {
        background-color: #ffffff;
        color: #333;
    }
    .el-main {
        background-color: #ffffff;
        color: #333;
    }
    body > .el-container {
        margin-bottom: 40px;
    }
    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }
    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }
    #qqww{

    }
</style>